<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="demo1.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="drag1" draggable="true"></div>

    <div class="two">

    </div>


    <script>
        var box = document.querySelector(".drag1");
        var temp;
        box.ondragstart=function(event){
            console.log("drag start");
            temp=this;
        };
        box.ondragend=function(){
            console.log("drag end");
        };

        box.ondragleave=function(){
            console.log("drag  leave");
        };
        box.ondrag=function(event){
            console.log("on drag");
        };

        var two = document.querySelector(".two");
        two.ondragleave=function(){

        };
        two.ondragenter=function(){
            console.log('目标' + "enter");
        };
        two.ondragover=function(e){
            //阻止拖拽默认事件
            e.preventDefault();
            console.log('目标' + "drag over");
        };
        //鼠标松开
        two.ondrop=function(){
            console.log('目标' + "ondrag");
            this.appendChild(temp);
        };
        two.ondragleave=function(){
            console.log('目标' + "drag leave");
        }
    </script>
</body>
</html>